import React from 'react'
import { _,Container, Button } from '@/core';
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';

import "./Content.less";
const rightIcon = (
    <svg t="1660470080783" className="icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="4939" width="28" height="28">
        <path d="M256 64l448 448-448 448z" fill="#515151" p-id="4940"></path>
    </svg>
)
const getState = function(){
    let pathname = _.his.location.pathname;
    let names = pathname.split("/");
    let key = names[2].replace(/\d/g,'');
    let menu = global.MENU[key];
    return {
        menu:menu,
        menuKey:pathname,
        list:[],
        count:0,
        size:10
    }
}

class Index extends React.Component {

    goDetail = (item)=>{
        _.his.push({
            pathname:`/listDetail/${item.categoryId}/${item.id}`
        })
    }

    getList = ()=>{
        let pathname = _.his.location.pathname;
        let name = pathname.split('/').pop();
        let id = {gsyw:1,mtjj:2,hydt:3,zgsbd:4}[name];
        _.api("page.articleList",{params:{"categoryId":id,count:1000}}).then((res) => {
            let list = res.list.slice(0,this.state.size);
            this.setState({
                oriList:res.list,
                count:Math.ceil(list.length/10),
                list:list
            })
        })
    }

    pageChange = (e,page)=>{
        let st = this.state;
        let start = st.size * (page - 1);
        this.setState({list:st.oriList.slice(start,start+st.size)})
    }

    state = getState()

    componentWillReceiveProps(nextProps) {
        let state = getState();
        if(state.menuKey != this.state.menuKey){
            this.setState(state);
            this.getList();
        }
    }

    componentWillMount(){window.dd = this;
        this.getList();
    }

    render(){
        let st = this.state;
        let menu = this.state.menu;
        let menuKey = this.state.menuKey;
        let list = this.state.list;
        let item = menu.list.filter((v)=>v.url == menuKey)[0];
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container className="list_content flr">
                    {
                        menu && (
                            <div className={`flone leftmenu`}>
                                <div>
                                    <div className="title">{menu?.name}</div>
                                    {
                                        menu.list.map((v,i)=>{
                                            let active = menuKey == v.url;
                                            return (
                                                <div className={`item ${active?'active':''}`} key={i} onClick={()=>_.his.push(v.url)}>
                                                    {rightIcon}
                                                    {v.text}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    }
                    <div className="flbox rightContent">
                        <div className="content">
                        {
                            list.map((v,i)=>{
                                return (
                                    <div key={i} className="item flr">
                                        <div className="flbox title"><span onClick={()=>this.goDetail(v)}>{v.title}</span></div>
                                        <div className="flone date">&nbsp;&nbsp;{_.MOMENT(v.modified).format('YYYY-MM-DD')}</div>
                                    </div>
                                )
                            })
                        }
                        </div>
                        <div className="fl-right">
                            <Pagination
                                count={st.count}
                                onChange={this.pageChange}
                                renderItem={(item) => (
                                    <PaginationItem
                                        {...item}
                                    />
                                )}
                            />
                        </div>
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default Index;
